<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>10_网格布局-模板区域选择</title>
        <style>
            .container {
                width: 400px;
                height: 400px;
                background-color: #ccc;

                display: grid;

                grid-template-rows: 40px 1fr 40px;
                grid-template-columns: 80px 1fr 80px;

                /* 名称相同的网格会合并 */
                grid-template-areas: 
                    "header header header"
                    "content-left content-main content-right"
                    "footer footer footer";
                
            }

            .item {
                font-size: 2rem;
                background-color: aqua;
            }

            .item01 {
                background-color: red;

                grid-area: header;
            }

            .item02 {
                background-color: plum;
                grid-area: content-left;
            }

            .item03 {
                background-color: teal;
                grid-area: content-main;
            }

            .item04 {
                background-color: cornsilk;
                grid-area: content-right;
            }

            .item05 {
                background-color: darkgreen;
                grid-area: footer;
            }




        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item01"></div>
            <div class="item item02"></div>
            <div class="item item03"></div>
            <div class="item item04"></div>
            <div class="item item05"></div>
        </div>
    </body>
</html>